@charset "utf-8"; 

.evt_wrp{position: relative; width: 100%; overflow: hidden; cursor: default; letter-spacing: -0.5px;}
.evt_wrp img{vertical-align: top;}
.evt_wrp strong{font-weight: 700;}
.evt_wrp .tit,
.evt_wrp .inner{position: relative; width: fit-content; margin: 0 auto; height: unset;}
.evt_wrp .tit{padding-bottom: 40px;}

.evt_wrp .visual{background: #ece6e4 url('https://img.megastudyacademy.co.kr/campus/mbc/event/2025/0910_uni_cbm/bg_visual.png') no-repeat center 0;}
.evt_wrp .visual .inner{animation: bounce-top .9s both}
.evt_wrp .typo{position: absolute; top: 90px; right: -10px; background: #ff4c4c; border-radius: 50%; animation: scale-down-center .3s .5s cubic-bezier(.25,.46,.45,.94) both; display: grid; height: 100px; width: 100px;justify-content: center; align-items: center;}

@keyframes bounce-top{0%{transform: translateY(-45px); animation-timing-function: ease-in; opacity:1} 24%{opacity: 1} 40%{transform: translateY(-24px); animation-timing-function: ease-in} 65%{transform: translateY(-12px); animation-timing-function: ease-in} 82%{transform: translateY(-6px); animation-timing-function:ease-in} 93%{transform: translateY(-4px); animation-timing-function: ease-in} 25%,55%,75%,87%{transform: translateY(0); animation-timing-function: ease-out} 100%{transform: translateY(0); animation-timing-function: ease-out; opacity:1}}

@keyframes scale-down-center{0%{transform: scale(.2); opacity: 0;} 100%{transform: scale(1)}}

.evt_wrp .conts{width: 1200px; margin: 0 auto; overflow: hidden;}
.evt_wrp .conts li{position: relative; float: left; margin-right: 15px;}
.evt_wrp .conts li:last-child{margin-right: 0;}
.evt_wrp .conts li .over{position: absolute; top: 0; left: 0; display: none;}

.evt_wrp .con1{width: 1200px; margin: 0 auto; overflow: hidden; padding: 20px 0 120px;}
.evt_wrp .con1 li{position: relative; float: left;}
.evt_wrp .con1 li:nth-child(2){margin-top: 8px;}
.evt_wrp .con1 li:nth-child(3){margin-top: -10px;}
.evt_wrp .con1 li:nth-child(4){margin: 110px 0 0 95px;}

.evt_wrp .con4 li{margin-right: 55px;}
.evt_wrp .con4 li:hover{cursor: pointer;}
.evt_wrp .conts li:hover .over{display: block; animation: slide-top .3s cubic-bezier(.25,.46,.45,.94) both;}

.evt_wrp .tabs_lec{width: 780px; margin: 0 auto 30px; overflow: hidden;display: flex;justify-content: center;}
.evt_wrp .tabs_lec li{display: inline-block; width: 49%; text-align: center; background: #222; border-radius: 3px; padding: 20px; font-size: 21px; cursor: pointer; margin-right: 5px; justify-content: center; align-items: center; color: #fff;}
.evt_wrp .tabs_lec li strong{font-weight: 800; padding: 0 6px;}
.tabs_lec li.active{background: #ff4c4c;}
.tabs_lec li:first-child{margin-left: 0;}


@keyframes slide-top{0%{transform: translateY(368px); opacity: 0;} 100%{transform: translateY(0)}}

* [class^="bg_"] {padding: 100px 0;}

.evt_wrp .bg_01{background: #fff; padding: 100px 0 0;}
.evt_wrp .bg_02{background: #f5f1ed;}
.evt_wrp .bg_03{background: #dee3e5;}
.evt_wrp .btm{background: #000;}

.evt_wrp .up-on-scroll{transition: transform .7s, opacity 1.7s;}

@keyframes blink{0%{opacity: 1} 50%{opacity:.2} 100%{opacity:1}}
@keyframes updown{ 0%{transform: translateY(-5px);} 100%{transform: translateY(5px);}}


@media screen and (min-width: 761px) {
    .evt_wrp .tabs_lec li br{display: none;}
}
/* 모바일 */
@media screen and (max-width: 760px) {
    * [class^="bg_"] {padding: 10% 0;}
    .evt_wrp .tit,
    .evt_wrp .inner{width: 95%; margin: 0 auto;}
    .evt_wrp .tit{padding-bottom: 5%;}
    .evt_wrp .typo{top: 10px; right: 10px; height: 80px; width: 80px;}
    .evt_wrp .typo img{width: 80%; margin-left: 10%;}
    .evt_wrp .bg_01{padding: 10% 0 0;}
    .evt_wrp .tabs_lec{width: 95%;}
    .evt_wrp .tab-conts{margin-left: -5%; padding: 0 2%;}
    .evt_wrp .tabs_lec li {font-size: 18px; padding: 10px 0}
    
    .evt_wrp .con1{width: 90%; padding: 0 0 10% 0;}
    .evt_wrp .con1 li{margin-right: 0;}
    .evt_wrp .con1 li:nth-child(2){margin-top: 30px;}
    .evt_wrp .con1 li:nth-child(3){margin-top: 20px;}
    .evt_wrp .con1 li:nth-child(4){margin: 40px 0 0 0;}

    .evt_wrp .conts{width: auto; padding: 0 5% 5%; overflow-x: auto; overflow-y: hidden; white-space: nowrap; display: block;-webkit-overflow-scrolling: touch; padding-bottom: 10px;}

    .evt_wrp .conts li{float: none; display: inline-block; margin-right: 10px; width: auto;}

    .evt_wrp .conts li img {width: 150px; height: auto;}
    .evt_wrp .btm .inner{width: 130%; margin-left: -15%;}
}